<template>
  <div>
    <div class="setting">
      <div class="block" v-for="(v, k) in setting" :key="k">
        <mt-cell :title="v.title">
          <mt-switch v-model="v.value" @change="saveSet(k)"></mt-switch>
        </mt-cell>
        <div class="desc" v-html="v.desc"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'Mint-ui'

  export default {
    name: 'Setting',
    data () {
      return {
        setting: {
          report_remind: {
            title: '羊毛线报',
            value: false,
            desc: `<p>非常及时的可赚钱的羊毛线报，如： bug单；</p>`
          },
          activity_remind: {
            title: '抢兑活动：',
            value: false,
            desc: `<p>您将在定点抢兑活动的，前5分钟收到消息提醒；</p>
                   <p>如：天天民生日10:00､15:00的抢兑，如果在您的活动管理中，您将于9:55､14:55收到消息提醒；</p>`
          },
          daily_activity_remind: {
            title: '日报提醒：',
            value: false,
            desc: `<p>每天早上9:00给您发送您的羊毛日报；</p>
                   <p>每天20:00给您发送未完成签到提醒；</p>
                   <p>每个刷卡任务（如周周刷、月月刷）的最后两天也会提醒您尚未完成任务；</p>`
          },
          auto_add: {
            title: '自动订阅：',
            value: false,
            desc: `<p>您勾选拥有的信用卡银行后，这些银行新增的这4星／5星活动，将自动加入到您的活动管理中；</p>`
          }
        }
      }
    },
    methods: {
      getInfo () {
        this.$post('/vue/setting/get_set', '').then(data => {
          for (const i in data) {
            if (data.hasOwnProperty(i)) {
              this.setting[i].value = data[i] === '1'
            }
          }
        })
      },
      saveSet (field) {
        let params = {}
        params[field] = this.setting[field].value ? 1 : 2
        this.$post('/vue/setting/save', params).then(data => {
          msg(data)
        })
      }
    },
    mounted () {
      this.getInfo()
    }
  }
  const msg = m => {
    Toast({
      message: m,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(255, 129, 98);
  @c-dark-red: rgb(217, 117, 99);
  @c-light-blue: rgb(242, 247, 250);
  @c-blue: rgb(108, 184, 222);

  .setting {
    min-height: 100vh;
    background-color: #FFF;
    text-align: left;
    .block {
      padding: 12px 12px 0;
      &::after {
        content: '';
        display: block;
        height: 8px;
        background-color: rgb(240, 244, 247);
        margin: 0 -12px 0;
      }
      .desc {
        font-size: 12px;
        line-height: 24px;
        color: @c-124;
        padding: 12px 0;
      }
    }
    .mint-cell {
      border-bottom: 1px solid @c-226;
      .mint-cell-wrapper {
        padding: 0;
        .mint-cell-title {
          font-size: 13px;
          font-weight: bold;
          line-height: 24px;
          color: @c-124;
        }
      }
    }
    .mint-switch {
      .mint-switch-input:checked {
        & + .mint-switch-core {
          border-color: @c-red;
          background-color: @c-red;
        }
      } 
    }
  }
</style>